import React,{Component}from 'react'

/*
    16.8是React的一个主要版本，因为从此以后有了Hooks写法。

    在v16.8以前，类组件用的非常多
    在v16.8以后，函数组件用的非常多

    React事件绑定
    语法：onEventName={ handler },以on小写开头，后面的事件名，使用大驼峰命名法
    事件处理器可以封装在当前组件类的内部，在jsx中可以使用this来访问。注意在事件处理中，this等于undefined.但是我们经常需要在事件处理器中，访问当前组件实例(this),该怎么办?一使用.bind解决this指向问题，或者使用箭头函数语法来绑定


    一、使用.bind()的方式绑定事件
    如果使用.bind()的方式来解决this指向问题，这个.bind()的操作可以直接写在jsx中,也可以写在constructor()中，还可以写render()方法中，return之前，事件对象永远是事件处理器的最后一个参数.无需手动传递事件对象

    二、使用箭头函数的方式绑定事件
    如果使用箭头函数的方式来绑定事件，不用考虑this指向问题语法 onClick={()=>this.handleClick()}
    事件对象需要手动传递事件。语法onClick={(e)=>this.handleClick(e)}

*/
//函数式组件(没有生命周期，没有this)
function QfChild(){
    return(
        <div
            style={{
                fontSize:'33px',
                color:'red'
        }}
        onClick={()=>{
            console.log('我是qf-chid子组件');
        }}
        >
            我是qf-chid子组件
        </div>
    )
}




//类组件(有生命周期，有this)
export default class TestEvent extends Component{
    //事件处理器
    click1(e){
        console.log('clicked');
        console.log('this',this);
        console.log('事件对象',e);
    }
    //测试箭头函数
    click2(e){
        console.log('clicked');
        console.log('this',this);
        console.log('事件对象',e);
    }
    //测试阻止冒泡
    innerClick(e){
        e.stopPropagation()
        console.log('inner clicked');
        console.log('事件对象', e);
    }
    //enter事件
    conform(e){
        if(e.keyCode==13){
            console.log('enter',e.target.value);
        }
    }
    //阻止默认
    prevent(e){
        e.preventDefault()
        console.log('clicked');
    }

    
    render(){
        //在类组件中render()不能少，如果少了render()，那么组件没有试图结构
        return (
            <div>
                <h1>学习事件绑定</h1>
                <hr />
                {/* 使用.bind的方式来解决事件处理器中的this指向问题 */}
                <button onClick={()=>this.click1(this)}>点击</button>
                <hr />
                {/* 使用箭头函数来绑定事件没有this指向问题 */}
                <button onClick={() => this.click2()}>点击4</button>

                {/* 阻止事件冒泡,没有vue事件那些东西 */}
                <div className='outer' onClick={()=>console.log('outer click')}>
                    <div 
                        className='inner'
                        onClick={(e)=>this.innerClick(e)}>测试阻止冒泡
                    </div>
                </div>
                {/* 绑定键盘事件 */}
                <div>
                    <input type="text" onKeyUp={e=>this.conform(e)} />
                </div>
                {/* 阻止默认行为 */}
                <a href="https://www.baidu.com" onClick={e=>this.prevent(e)}>条约</a>
                <hr />
                {/* 测试函数式组件中的事件绑定 */}
                <QfChild/>

            </div>
        )
    }
}